<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
div{
    /*box-sizing: content-box;*/
    box-sizing: border-box;
    width: 400px;
    height: 400px;
    background-color: aliceblue;
    padding: 100px;
}

</style>
<body>
<!--   组成
   内容 padding margin border
   类型 内容盒子（w3c盒子/标准盒子） 边框盒子（IE盒子/怪异盒子）
      box-sizing :content-box  内容盒子 ： width height 设置给内容
         盒子宽：width+padding-left+podding-right+boder-right
         盒子所占空间：盒子宽高+margin
      box-sizing :border-box   边框盒子 ： width height 设置给内容+padding+边框
         盒子宽：width
         盒子所占空间：width+margin
-->
<div>
盒模型
</div>
</body>
</html>